<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="/favicon.svg" sizes="any">
    <title>{{.Title}}</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f8f9fa;
        }
        .container {
            max-width: 1100px;
            margin: 0 auto;
        }
        .header {
            margin-bottom: 20px;
        }
        .layout {
            display: flex;
            gap: 20px;
        }
        .sidebar {
            width: 260px;
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            padding: 15px;
            max-height: 80vh;
            overflow-y: auto;
        }
        .sidebar h2 {
            font-size: 16px;
            margin: 0 0 10px 0;
        }
        .dir-group {
            margin-bottom: 12px;
        }
        .dir-title {
            font-weight: bold;
            font-size: 13px;
            margin-bottom: 4px;
            color: #333;
            cursor: pointer;
        }
        .dir-title.active {
            color: #007bff;
        }
        .dir-doc-list {
            list-style: none;
            padding-left: 10px;
            margin: 0;
        }
        .dir-doc-list li {
            margin: 2px 0;
            font-size: 13px;
        }
        .dir-doc-list a {
            color: #007bff;
            text-decoration: none;
        }
        .dir-doc-list a:hover {
            text-decoration: underline;
        }
        .empty-dir {
            font-size: 13px;
            color: #6c757d;
        }
        .main {
            flex: 1;
        }
        .document-card {
            background: white;
            padding: 20px;
            margin-bottom: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .document-title {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        .document-meta {
            color: #6c757d;
            font-size: 0.9em;
            margin-bottom: 10px;
        }
        .document-path {
            color: #6c757d;
            font-size: 0.85em;
            margin-bottom: 4px;
        }
        .document-actions {
            display: flex;
            gap: 10px;
        }
        .btn {
            padding: 5px 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9em;
            text-decoration: none;
            display: inline-block;
        }
        .btn-view {
            background: #007bff;
            color: white;
        }
        .btn-download {
            background: #28a745;
            color: white;
        }
        .status-badge {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.8em;
            margin-left: 10px;
        }
        .status-public {
            background: #d4edda;
            color: #155724;
        }
        .status-private {
            background: #f8d7da;
            color: #721c24;
        }
        .status-expired {
            background: #fff3cd;
            color: #856404;
        }
        .empty-state {
            text-align: center;
            padding: 40px;
            color: #6c757d;
        }
        .search-container {
            margin-bottom: 20px;
        }
        .search-form {
            display: flex;
            gap: 8px;
            margin-bottom: 8px;
        }
        .search-input {
            flex: 1;
            padding: 6px 10px;
            border-radius: 4px;
            border: 1px solid #ced4da;
            font-size: 0.9em;
        }
        .search-btn {
            padding: 6px 12px;
            border-radius: 4px;
            border: none;
            background: #007bff;
            color: #fff;
            font-size: 0.9em;
            cursor: pointer;
        }
        .search-result-info {
            font-size: 0.85em;
            color: #6c757d;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>{{.Title}}</h1>
        </div>

        <div class="layout">
            <aside class="sidebar">
                <h2>目录</h2>
                {{if .DirectoryGroups}}
                    {{range .DirectoryGroups}}
                        <div class="dir-group">
                            <div class="dir-title" data-dir="{{.DirPath}}">
                                {{if .DirPath}}
                                    {{.DirPath}}
                                {{else}}
                                    （根目录）
                                {{end}}
                            </div>
                        </div>
                    {{end}}
                {{else}}
                    <p class="empty-dir">暂无目录信息</p>
                {{end}}
            </aside>

            <main class="main">
                {{if .User}}
                <div class="search-container">
                    <form method="GET" action="/documents" class="search-form">
                        <input type="hidden" name="user" value="{{.User.UID}}">
                        <input
                            type="text"
                            name="search"
                            class="search-input"
                            placeholder="搜索文档标题或内容..."
                            value="{{.Search}}"
                            autocomplete="off"
                        >
                        <button type="submit" class="search-btn">搜索</button>
                    </form>
                    {{if .Search}}
                    <div class="search-result-info">
                        搜索 "<strong>{{.Search}}</strong>" 共找到 <strong>{{len .Documents}}</strong> 篇文档
                    </div>
                    {{end}}
                </div>
                {{end}}

                {{if .Documents}}
                    {{range .Documents}}
                <div class="document-card" id="doc-{{.UUID}}" data-dir="{{.DirPath}}">
                    <div class="document-title">
                        {{.Title}}
                        {{if .IsPublic}}
                            <span class="status-badge status-public">公开</span>
                        {{else}}
                            <span class="status-badge status-private">私有</span>
                        {{end}}
                        {{if .IsExpired}}
                            <span class="status-badge status-expired">已过期</span>
                        {{end}}
                    </div>
                    {{if .DirPath}}
                    <div class="document-path">
                        目录: {{.DirPath}}
                    </div>
                    {{end}}
                    <div class="document-meta">
                        作者: {{.User.Name}} |
                        创建时间: {{.CreatedAt.Format "2006-01-02 15:04:05"}} |
                        浏览: {{.Views}}
                        {{if .ExpiresAt}}
                            | 过期时间: {{.ExpiresAt.Format "2006-01-02 15:04:05"}}
                        {{end}}
                    </div>
                    <div class="document-actions">
                        <a href="/d/{{.UUID}}" class="btn btn-view">查看</a>
                        <a href="/d/{{.UUID}}/download" class="btn btn-download">下载</a>
                    </div>
                </div>
                    {{end}}
                {{else}}
                    <div class="empty-state">
                        <h3>暂无文档</h3>
                        <p>使用 Obsidian 插件上传文档后，它们将显示在这里</p>
                    </div>
                {{end}}
            </main>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const cards = Array.from(document.querySelectorAll('.document-card'));
            const dirTitles = Array.from(document.querySelectorAll('.dir-title[data-dir]'));
            let activeDir = null;

            dirTitles.forEach((el) => {
                el.addEventListener('click', () => {
                    const dir = el.getAttribute('data-dir') || '';

                    // 再次点击同一个目录则取消筛选
                    if (activeDir === dir) {
                        activeDir = null;
                        dirTitles.forEach((t) => t.classList.remove('active'));
                        cards.forEach((card) => {
                            card.style.display = '';
                        });
                        return;
                    }

                    activeDir = dir;
                    dirTitles.forEach((t) => {
                        if ((t.getAttribute('data-dir') || '') === dir) {
                            t.classList.add('active');
                        } else {
                            t.classList.remove('active');
                        }
                    });

                      cards.forEach((card) => {
                          const cardDir = card.getAttribute('data-dir') || '';
                          if (!dir) {
                              card.style.display = '';
                              return;
                          }
                          // 目录筛选：匹配当前目录以及其子目录
                          if (cardDir === dir || cardDir.startsWith(dir + '/')) {
                              card.style.display = '';
                          } else {
                              card.style.display = 'none';
                          }
                      });
                });
            });
        });
    </script>
</body>
</html>
